<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root">

    </div>
    <div id="box">

    </div>
</body>
<script src="../react@17.js"></script>
<script src="../react-dom@17.js"></script>
<!--将jsx编译成js -->
<script src="../babel.js"></script>
<!-- 声明type类型为text/babel 交由babel.js解析-->
<script type="text/babel">
    /* 
        jsx 是js得一种扩展语法，它兼容js所有语法，并且通常与React搭配使用进行声明式开发.
        浏览器不能直接编译jsx，需要想办法将jsx先编译成js 然后在运行在浏览器上;
        jsx 实际上就是React.createElement()语法糖
    */
    /* 
    浏览器内核：
    1. 渲染引擎 渲染html css
    2. js加载引擎： 加载js代码
    */
    //   声明式创建虚拟dom React.createElement("h1",{id:"box"},"学习使我快乐")
    let h1 = <h1 >学习使我快乐！！！</h1>
    console.log(h1)
    ReactDOM.render(h1, document.getElementById("root"));

    let ul = (
        <ul>
            <li>今天心情美哒哒</li>
            <li>学习使我快乐！！！</li>
            <li>嘿嘿晒晒太阳更健康！！！ <span>啦啦啦啦</span></li>
        </ul>
    )
    console.log(ul)
    ReactDOM.render(ul, document.getElementById("box"))
</script>

</html>